<template>
  <div class="login">
    <van-nav-bar title="登录" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <div class="form">
        <div class="form-item">
          <input
            v-model="mobile"
            class="inp"
            maxlength="11"
            placeholder="请输入手机号码"
            type="text"
          />
        </div>

        <div class="form-item">
          <input
            v-model="picCode"
            class="inp"
            maxlength="5"
            placeholder="请输入图形验证码"
            type="text"
          />
          <img
            v-if="picUrl"
            :src="picUrl"
            @click="getPicCode"
          />
        </div>

        <div class="form-item">
          <input
            v-model="msgCode"
            maxlength="6"
            class="inp"
            placeholder="请输入短信验证码"
            type="text"
          />
          <button @click="getCode">
            {{ second === totalSecond ? '获取验证码' : second + `秒后重新发送` }}
          </button>
        </div>
      </div>

      <div
        @click="loginBtn"
        class="login-btn"
      >登录</div>
    </div>
  </div>
</template>

<script>
import Login from '@/api/login';
import { login } from '@/utils/login';
export default {
    data() {
        return {
            picUrl: '' /* 存储请求渲染的图片地址 */,
            picKey: '' /* 将来请求传递的图形验证码唯一标识 */,
            totalSecond: 60, // 总秒数
            second: 60, // 倒计时的秒数 开定时器对 second--
            timer: null, // 定时器 id
            mobile: '', // 手机号
            picCode: '' /* 用户输入的图形验证码 */,
            msgCode: '' /* 短信验证码 */,
            username: ''
        };
    },

    // 页面实例创造后 调用下面方法中的局部getPicCode
    created() {
        this.getPicCode();
    },

    methods: {
        // 获取图形验证码  封装成方法getPicCode
        getPicCode() {
            Login.getPicCode().then((res) => {
                const { base64, key } = res.result; /* 调用全局中的getPicCode 并解构 */
                this.picUrl = base64; /* 存储地址 */
                this.picKey = key; /* 存储唯一标识 */
                this.$toast('获取图形验证码成功');
            });
        },

        // 校验输入框内容  通过返回true,否则false
        validFn() {
            if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
                this.$toast('请输入正确的手机号');
                return false;
            }
            if (!/^\w{4}$/.test(this.picCode)) {
                this.$toast('请输入正确的图形验证码');
                return false;
            }
            return true;
        },

        // 获取短信验证码
        getCode() {
            if (!this.validFn()) {
                // 如果没通过校验返回
                return;
            }
            // 当前目前没有定时器开着，且totalsecond和second 一致(秒数归位)才可以倒计时
            if (!this.timer && this.second === this.totalSecond) {
                // 发送请求，获取验证码
                Login.getMsgCode({
                    captchaCode: this.picCode,
                    captchaKey: this.picKey,
                    mobile: this.mobile
                }).then((res) => {
                    console.log('222222', res);
                });
                this.$toast('发送成功，请注意查收');
                // 开启倒计时
                this.timer = setInterval(() => {
                    this.second--;
                    if (this.second < 1) {
                        clearInterval(this.timer); /* 关闭 */
                        this.timer = null; /* 重置 */
                        this.second = this.totalSecond; /* 归位 */
                    }
                }, 1000);
                // 发送请求，获取验证码
                this.$toast('发送成功，请注意查收');
            }
        },
        // 登录
        async loginBtn() {
            if (!this.validFn()) {
                return;
            }
            if (!/^\d{6}$/.test(this.msgCode)) {
                this.$toast('请输入正确的手机验证码');
                return;
            }
            const params = {
                mobile: this.mobile,
                smsCode: this.msgCode
            };
            await login(params);
            await this.$router.push({
                name: 'home'
            });
            // this.$toast('登录成功');
        }
    },
    // 离开页面消除定时器
    destroyed() {
        clearInterval(this.timer);
    }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 49px 29px;

    .title {
        margin-bottom: 20px;

        h3 {
            font-size: 26px;
            font-weight: normal;
        }

        p {
            line-height: 40px;
            font-size: 14px;
            color: #b8b8b8;
        }
    }

    .form-item {
        border-bottom: 1px solid #f3f1f2;
        padding: 8px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;

        .inp {
            display: block;
            border: none;
            outline: none;
            height: 32px;
            font-size: 14px;
            flex: 1;
        }

        img {
            width: 94px;
            height: 31px;
        }

        button {
            height: 31px;
            border: none;
            font-size: 13px;
            color: #cea26a;
            background-color: transparent;
            padding-right: 9px;
        }
    }

    .login-btn {
        width: 100%;
        height: 42px;
        margin-top: 39px;
        background: linear-gradient(90deg, #ecb53c, #ff9211);
        color: #fff;
        border-radius: 39px;
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
